<template>
    <div>
        <vxe-tip status="primary">
            <p>【不满意原因】字段根据是否满意决定【显示隐藏】</p>
        </vxe-tip>
        <vxe-tip status="primary">
            <p>【满意度】字段根据是否满意决定【是否禁用】</p>
        </vxe-tip>
        <vxe-tip status="success">
            <p>1. 在表单项的events事件中定义事件</p>
            <p>2. mounted 属性配合 triggerEvents 方法 在表单初始化时触发表单项事件（根据业务情况决定是否需要初始化）</p>
        </vxe-tip>
        <vxe-tip status="warning">
            <p>隐藏的字段不会触发校验</p>
        </vxe-tip>

        <y-form :options="formOptions" @submit="SubmitEvent">
        </y-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formOptions: {
                titleWidth: 200,
                mounted({ data, Yform }) {
                    // Yform.triggerEvents(['appraise'], 'change')
                },
                items: [
                    {
                        field: 'appraise', title: '对公司整体评价', span: 24, itemRender: {
                            name: 'VxeRadioGroup',
                            options: [
                                { label: '满意', value: '1' },
                                { label: '不满意', value: '2' },
                            ],
                            events: {
                                change(e) {
                                    const { data, $form } = e;
                                    // 直接给props赋值，而非给他的属性赋值
                                    $form.getItemByField('satisfaction').itemRender.props = { disabled: data.appraise == '2' }
                                }
                            }
                        }
                    },
                    {
                        field: 'cause',
                        title: '不满意原因',
                        required: true,
                        visibleMethod({ data }) {
                            return data.appraise == '2'
                        },
                        itemRender: {
                            name: 'VxeTextarea',

                        }
                    },
                    {
                        field: 'satisfaction',
                        title: '满意度',
                        itemRender: {
                            name: 'VxeRate',
                        }
                    },
                    {
                        align: 'center',
                        span: 24,
                        itemRender: {
                            name: 'VxeButtonGroup',
                            options: [
                                { type: 'submit', content: '提交', status: 'primary' },
                                { type: 'reset', content: '重置' }
                            ]
                        }
                    }
                ]
            }
        }
    },
    methods: {
        SubmitEvent(data) {
            this.$message.success('提交成功')
        }
    }
}
</script>

<style lang="scss" scoped></style>